<template>
	<view class="issue-coupon-page">
		<!-- 顶部导航栏 -->
		<view class="navbar">

		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 优惠券名称 -->
			<view class="form-item">
				<text class="label">优惠券名称</text>
				<input class="input" v-model="coupon.name"  />
			</view>

			<!-- 优惠券类型 -->
			<view class="form-item">
				<text class="label">优惠券类型</text>
				<radio-group class="radio-group" @change="onTypeChange">
					<radio class="radio" :value="1" :checked="coupon.type === 1">满减券</radio>
					<radio class="radio" :value="2" :checked="coupon.type === 2">打折券</radio>
				</radio-group>
			</view>

			<!-- 满减金额（满减券显示） -->
			<view class="form-item" v-if="coupon.type === 1">
				<text class="label">满减金额</text>
				<input class="input" v-model.number="coupon.fullAmount" type="number" />
				<text class="unit">元</text>
			</view>

			<!-- 折扣（打折券显示） -->
			<view class="form-item" v-if="coupon.type === 2">
				<text class="label">打</text>
				<input class="input input-short" v-model.number="coupon.discount" type="number"/>
				<text class="unit">折</text>
			</view>

			<!-- 发放开始时间 -->
			<view class="form-item">
				<text class="label">发放开始时间</text>
				<view class="pickerView">
					<picker class="picker" mode="date" :value="coupon.issueStartTime" @change="onIssueStartTimeChange">
						<text class="picker-text">{{ coupon.issueStartTime }}</text>
						<image src="/static/coupon/收起箭头小@2x.png" mode=""></image>
					</picker>

				</view>

			</view>

			<!-- 发放结束时间 -->
			<view class="form-item">
				<text class="label">发放结束时间</text>
				<view class="pickerView">
					<picker class="picker" mode="date" :value="coupon.issueEndTime" @change="onIssueEndTimeChange">
						<text class="picker-text">{{ coupon.issueEndTime }}</text>
						<image src="/static/coupon/收起箭头小@2x.png" mode=""></image>
					</picker>

				</view>
			</view>

			<!-- 投放数量 -->
			<view class="form-item">
				<text class="label">投放数量</text>
				<input class="input" v-model.number="coupon.totalCount" type="number" />
				<text class="unit">张</text>
			</view>

			<!-- 每人限领 -->
			<view class="form-item">
				<text class="label">每人限领</text>
				<input class="input" v-model.number="coupon.limitPerPerson" type="number"/>
				<text class="unit">张</text>
			</view>

			<!-- 使用有效期 -->
			<view class="form-item">
				<text class="label">使用有效期</text>
				<view class="pickerView">
					<picker class="picker" mode="date" :value="coupon.useStartTime" @change="onUseStartTimeChange">
						<text class="picker-text">{{ coupon.useStartTime }}</text>
						<image src="/static/coupon/收起箭头小@2x.png" mode=""></image>
					</picker>
				</view>
				<view class="pickerView">
					<picker class="picker" mode="date" :value="coupon.useEndTime" @change="onUseEndTimeChange">
						<text class="picker-text">{{ coupon.useEndTime }}</text>
						<image src="/static/coupon/收起箭头小@2x.png" mode=""></image>
					</picker>
				</view>
			</view>
		</view>

		<!-- 确认投放按钮 -->
		<button class="confirm-btn" @click="confirmIssue">确认投放</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				coupon: {
					name: '',
					type: 2, // 默认选中打折券
					fullAmount: '',
					discount: '',
					issueStartTime: '2023-03-18',
					issueEndTime: '2023-03-18',
					totalCount: '',
					limitPerPerson: '',
					useStartTime: '2023-03-18',
					useEndTime: '2023-03-18'
				}
			};
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 优惠券类型变更
			onTypeChange(e) {
				this.coupon.type = parseInt(e.detail.value);
			},
			// 发放开始时间变更
			onIssueStartTimeChange(e) {
				this.coupon.issueStartTime = e.detail.value;
			},
			// 发放结束时间变更
			onIssueEndTimeChange(e) {
				this.coupon.issueEndTime = e.detail.value;
			},
			// 使用开始时间变更
			onUseStartTimeChange(e) {
				this.coupon.useStartTime = e.detail.value;
			},
			// 使用结束时间变更
			onUseEndTimeChange(e) {
				this.coupon.useEndTime = e.detail.value;
			},
			// 确认投放
			confirmIssue() {
				// 表单校验逻辑
				if (!this.coupon.name) {
					uni.showToast({
						title: '请输入优惠券名称',
						icon: 'none'
					});
					return;
				}
				if (this.coupon.type === 1 && !this.coupon.fullAmount) {
					uni.showToast({
						title: '请输入满减金额',
						icon: 'none'
					});
					return;
				}
				if (this.coupon.type === 2 && !this.coupon.discount) {
					uni.showToast({
						title: '请输入折扣',
						icon: 'none'
					});
					return;
				}
				if (!this.coupon.totalCount) {
					uni.showToast({
						title: '请输入投放数量',
						icon: 'none'
					});
					return;
				}
				if (!this.coupon.limitPerPerson) {
					uni.showToast({
						title: '请输入每人限领张数',
						icon: 'none'
					});
					return;
				}

				// 模拟调用接口提交数据
				uni.showLoading({
					title: '投放中...'
				});
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '投放成功',
						icon: 'success'
					});
					// 投放成功后返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}, 1500);
			}
		}
	};
</script>

<style scoped>
	.issue-coupon-page {
		background-color: #f5f5f5;
		height: 100vh;
	}

	/* 顶部导航栏 */
	.navbar {
		background-color: #3385fd;
		width: 750rpx;
		height: 300rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
	}



	/* 表单容器 */
	.form-container {
		background-color: #fff;
		padding: 40rpx 20rpx 20rpx ;
		margin: -300rpx 20rpx 10rpx;
		border-radius: 20rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.label {
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
		width: 180rpx;
	}

	.input {
		flex: 1;
		border: 1rpx solid #eee;
		border-radius: 50rpx;
		padding: 15rpx;
		font-size: 20rpx;
	}

	.input-short {
		width: 120rpx;
		margin: 0 10rpx;
	}

	.unit {
		font-size: 28rpx;
		color: #666;
		margin-left: 10rpx;
	}

	.radio-group {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.radio {
		margin-right: 30rpx;
		font-size: 28rpx;
	}

	.pickerView {
		display: flex;

		padding: 10rpx 30rpx;
		border: 2rpx solid #ebebeb;
		border-radius: 50rpx;
	}

	.pickerView image {
		margin-left: 30rpx;
		margin-top: 12rpx;
		width: 10rpx;
		height: 20rpx;
	}

	.picker {
		flex: 1;
	}

	.picker-text {
		font-size: 22rpx;
		color: #666;
	}

	/* 确认投放按钮 */
	.confirm-btn {
		background:linear-gradient(to right,#3184FD,#0662E6);
		color: #fff;
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		margin: 40rpx auto;
		font-size: 30rpx;
	}
</style>